<template>
  <div class="backgImage">
    <!-- 围栏区域统计 -->
    <div class="">
      <TitleView
        title="运维班组人员"
        :titlemore="true"
        @titleClick="titleMoreClick"
      ></TitleView>
      <div class="pl32 pr20 div1">
        <DataLeft_b :data="DataD"></DataLeft_b>
        <!-- <div class="div1_d">
                    <p class="div1_d_p1">装置区域</p>
                    <p class="div1_d_p2">
                        <span class="div1_d_p2_span1">{{ data1.zhuanzhi }}</span>
                        <span class="div1_d_p2_span2">个</span>
                    </p>
                </div>
                <div class="div1_d">
                    <p class="div1_d_p1">可燃气区域</p>
                    <p class="div1_d_p2">
                        <span class="div1_d_p2_span1">{{ data1.gas }}</span>
                        <span class="div1_d_p2_span2">个</span>
                    </p>
                </div>
                <div class="div1_d">
                    <p class="div1_d_p1">门岗</p>
                    <p class="div1_d_p2">
                        <span class="div1_d_p2_span1">{{ data1.mengang }}</span>
                        <span class="div1_d_p2_span2">个</span>
                    </p>
                </div>
                <div class="div1_d">
                    <p class="div1_d_p1">罐区</p>
                    <p class="div1_d_p2">
                        <span class="div1_d_p2_span1">{{ data1.guanqu }}</span>
                        <span class="div1_d_p2_span2">个</span>
                    </p>
                </div> -->
      </div>
    </div>
    <!-- 厂区人员统计 -->
    <div class="div2">
      <TitleView
        title="围栏报警数量统计"
        :titlemore="true"
        @titleClick="titleMoreClick"
      ></TitleView>
      <div class="pl32" style="height: 214px; width: 360px">
        <OverviewRightEcharts :data="data2"></OverviewRightEcharts>
      </div>
    </div>
    <!-- 厂区人员统计 -->
    <div class="div3">
      <TitleView
        title="人员报警显示"
        :titlemore="true"
        @titleClick="titleMoreClick"
      ></TitleView>
      <div class="div3_ul pl32 pr20">
        <DataRight :data="data3" />
      </div>
      <!-- <ul class="div3_ul pl32 pt20 pb20 pr20 ">
                <li class="div3_li_title">
                    <p class="div3_li_p1">报警区域</p>
                    <p class="div3_li_p1">人员统计</p>
                </li>
                <li class="div3_li">
                    <p class="div3_li_p">A列装置区</p>
                    <p class="div3_li_p">{{ data3.unitA }}人</p>
                </li>
                <li class="div3_li">
                    <p class="div3_li_p">B列装置区</p>
                    <p class="div3_li_p">{{ data3.unitB }}人</p>
                </li>
                <li class="div3_li">
                    <p class="div3_li_p">C列装置区</p>
                    <p class="div3_li_p">{{ data3.unitC }}人</p>
                </li>
                <li class="div3_li">
                    <p class="div3_li_p">D列装置区</p>
                    <p class="div3_li_p">{{ data3.unitD }}人</p>
                </li>
                <li class="div3_li">
                    <p class="div3_li_p">冷剂储配区</p>
                    <p class="div3_li_p">{{ data3.unitL }}人</p>
                </li>
                <li class="div3_li">
                    <p class="div3_li_p">乙烷储罐区</p>
                    <p class="div3_li_p">{{ data3.unitY }}人</p>
                </li>
            </ul> -->
    </div>
  </div>
</template>

<script>
import OverviewRightEcharts from "./components/Overview_right_echarts";
import { personal_right, over_left_view3 } from "@/request/api.js";
import DataLeft_b from "../Data/components/DataLeft_b";
import DataRight from "./components/DataRight";

export default {
  components: {
    OverviewRightEcharts,
    DataLeft_b,
    DataRight
  },
  data() {
    return {
      dataR: [],
      DataD: [],
      data: {},
      data1: { zhuanzhi: "0", gas: "0", mengang: "0", guanqu: "0" },
      data2: { time: [], renyuan: [], shengchan: [] },
      data3: [],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    titleMoreClick(msg) {
      console.log(msg);
    },
    getData() {
      personal_right().then((res) => {
        console.log(res);
        this.data1 = res.data.data1;
        this.data2 = res.data.data2;
        this.data3 = res.data.data3;
      });
      over_left_view3().then((res) => {
        console.log("res3:", res);
        this.DataD = res.data;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.div1 {
  width: 100%;
  height: 195px;
  width: 363px;
  // display: flex;
  // flex-wrap: wrap;
  // justify-content: space-between;

  .div1_d {
    width: 164px;
    height: 86px;
    background: url("@/assets/overview_right_shu.png");
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    .div1_d_p1 {
      margin-left: 5px;
      width: 70px;
      height: 14px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 15px;
    }

    .div1_d_p2 {
      width: 89px;
      text-align: center;

      .div1_d_p2_span1 {
        font-family: DIN;
        font-weight: bold;
        font-size: 24px;
        color: #ffffff;
      }

      .div1_d_p2_span2 {
        margin-left: 2px;
        color: #669dff;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
      }
    }
  }
}

.div2 {
  height: 295px;
}

.div3 {
  .div3_ul {
    li {
      display: grid;
      grid-template-columns: repeat(2, 50%);

      .div3_li_p {
        margin: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #c3d2e0;

        &:nth-child(1) {
          border-right: 1px solid rgba(204, 252, 253, 0.2);
        }
      }

      .div3_li_p1 {
        margin: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        font-family: PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;

        &:nth-child(1) {
          border-right: 1px solid rgba(204, 252, 253, 0.2);
        }
      }

      width: 356px;
      height: 32px;
      border: 1px solid rgba(204, 252, 253, 0.2);
      /* 内边距 */
      list-style-type: none;
      /* 移除列表项前的标记 */
    }

    li:first-child {
      margin-top: 0;
    }

    .div3_li_title {
      background: rgba(84, 199, 253, 0.2);
    }
  }
}
</style>
